<html><head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="india, travel, adventure, bookmarking">
	<meta name="description" content="This is site ment for indian travellers.">
	
	<link rel="stylesheet" href="jquery%20SLIDE%20SHOW_files/main.css" type="text/css">
	<script type="text/javascript" src="jquery%20SLIDE%20SHOW_files/jquery-1.js"></script>
	<title>Simple Slideshow : Using Jquery</title>
	
	
</head>
<body>
	<div id="wrapper">
		<div id="header"></div>
		<div id="body">
			<div id="bigPic">
				<img style="display: block; opacity: 1; z-index: 1;" src="jquery%20SLIDE%20SHOW_files/1.jpg" alt="">
				<img style="display: none; opacity: 1; z-index: 1;" src="jquery%20SLIDE%20SHOW_files/2.jpg" alt="">
				<img style="display: none; opacity: 1; z-index: 1;" src="jquery%20SLIDE%20SHOW_files/3.jpg" alt="">
				<img style="display: none; opacity: 1; z-index: 1;" src="jquery%20SLIDE%20SHOW_files/4.jpg" alt="">
				<img style="display: none; opacity: 1; z-index: 1;" src="jquery%20SLIDE%20SHOW_files/5.jpg" alt="">
				<img style="display: none; opacity: 1; z-index: 1;" src="jquery%20SLIDE%20SHOW_files/6.jpg" alt="">
				<img style="display: none; opacity: 1; z-index: 1;" src="jquery%20SLIDE%20SHOW_files/7.jpg" alt="">
				<img style="display: none; opacity: 1; z-index: 1;" src="jquery%20SLIDE%20SHOW_files/8.jpg" alt="">
				<img style="display: none; opacity: 1; z-index: 1;" src="jquery%20SLIDE%20SHOW_files/9.jpg" alt="">
				<img style="display: block; opacity: 0.935092; z-index: 2;" src="jquery%20SLIDE%20SHOW_files/10.jpg" alt="">
			</div>
			
			
			<ul id="thumbs">
				<li class="  active" rel="1"><img src="jquery%20SLIDE%20SHOW_files/1_thumb.jpg" alt=""></li>
				<li class=" " rel="2"><img src="jquery%20SLIDE%20SHOW_files/3_thumb.jpg" alt=""></li>
				<li class=" " rel="3"><img src="jquery%20SLIDE%20SHOW_files/4_thumb.jpg" alt=""></li>
				<li class=" " rel="4"><img src="jquery%20SLIDE%20SHOW_files/5_thumb.jpg" alt=""></li>
				<li class=" " rel="5"><img src="jquery%20SLIDE%20SHOW_files/6_thumb.jpg" alt=""></li>
				<li class=" " rel="6"><img src="jquery%20SLIDE%20SHOW_files/7_thumb.jpg" alt=""></li>
				<li class=" " rel="7"><img src="jquery%20SLIDE%20SHOW_files/8_thumb.jpg" alt=""></li>
				<li class=" " rel="8"><img src="jquery%20SLIDE%20SHOW_files/9_thumb.jpg" alt=""></li>
				<li class=" " rel="9"><img src="jquery%20SLIDE%20SHOW_files/10_thumb.jpg" alt=""></li>
				<li class=" " rel="10"><img src="jquery%20SLIDE%20SHOW_files/2_thumb.jpg" alt=""></li>
			</ul>
		
		</div>
		<div class="clearfix"></div>
		<div id="push"></div>
	</div>
	
	<div id="footer"><div><p>asdf</p></div></div>

	<script type="text/javascript">
	var currentImage;
    var currentIndex = -1;
    var interval;
    function showImage(index){
        if(index < $('#bigPic img').length){
        	var indexImage = $('#bigPic img')[index]
            if(currentImage){   
            	if(currentImage != indexImage ){
                    $(currentImage).css('z-index',2);
                    clearTimeout(myTimer);
                    $(currentImage).fadeOut(250, function() {
					    myTimer = setTimeout("showNext()", 3000);
					    $(this).css({'display':'none','z-index':1})
					});
                }
            }
            $(indexImage).css({'display':'block', 'opacity':1});
            currentImage = indexImage;
            currentIndex = index;
            $('#thumbs li').removeClass('active');
            $($('#thumbs li')[index]).addClass('active');
        }
    }
    
    function showNext(){
        var len = $('#bigPic img').length;
        var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
        showImage(next);
    }
    
    var myTimer;
    
    $(document).ready(function() {
	    myTimer = setTimeout("showNext()", 3000);
		showNext(); //loads first image
        $('#thumbs li').bind('click',function(e){
        	var count = $(this).attr('rel');
        	showImage(parseInt(count)-1);
        });
	});
    
	
	</script>	
	
</body></html>